<template>
  <div class="real-time-component-list">
    <el-row
      v-for="(item, i) in reverseData"
      :key="item.id"
      class="component"
      :class="item.isCurrent || item.isCompose ? 'isCur' : ''"
      @click.native="setCur(item)"
    >
      <el-col :span="3">
        <i :class="`el-icon-${item.icon}`"></i>
      </el-col>
      <el-col :span="6">
        <span>{{ item.label }}</span>
      </el-col>
      <el-col :span="8" :offset="7" class="icons">
        <i class="el-icon-top icon" @click.stop="upComponent(i)"></i>
        <i class="el-icon-bottom icon" @click.stop="downComponent(i)"></i>
        <i class="el-icon-delete icon" @click.stop="deleteComponent(i)"></i>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["componentData"]),
    ...mapGetters(["reverseData"]),
  },
  methods: {
    ...mapMutations([
      "swapComponent",
      "removeComponent",
      "setCurComponent",
      "saveHistoryState",
    ]),
    upComponent(index) {
      if (index == 0) return this.$message.info("置顶了");
      let len = this.reverseData.length;
      let i = len - 1 - index;
      let j = len - 1 - (index - 1);
      this.swapComponent([i, j]);
    },
    downComponent(index) {
      if (index == this.reverseData.length - 1)
        return this.$message.info("到底了");
      let len = this.reverseData.length;
      let i = len - 1 - index;
      let j = len - 1 - (index + 1);
      this.swapComponent([i, j]);
    },
    deleteComponent(index) {
      let len = this.reverseData.length;
      let i = len - 1 - index;
      this.removeComponent(i);
    },
    setCur(component) {
      this.setCurComponent(component);
    },
  },
};
</script>

<style lang="less" scoped>
.real-time-component-list {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  box-sizing: border-box;
  height: 40%;
  //   background-color: skyblue;
  overflow-y: auto;
  overflow-x: hidden;
  cursor: pointer;
  .component {
    // background-color: pink;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    .icon {
      margin-left: 5px;
    }
    .icons {
      display: none;
    }
  }
  .component:hover {
    background-color: #eee;
    .icons {
      display: block;
    }
  }

  .isCur {
    background-color: rgba(135, 206, 235, 0.5);
    color: rgb(92, 178, 224);
  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #dddddd;
    background: #9e9e9e;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #f5f5f5;
    border-radius: 10px;
    background: #ededed;
  }
}
</style>
